<template>
  <div>
    <div class="locationProblem">当前定位模糊，请与加油员确认当前油站</div>
	<p class="captionNear">壳牌高品质燃油，祝您畅行无忧</p>
	<ul v-for="(item,index) in stations" class="nearyz" :key="item.id" @click="showConfirmStation(index)">
		<li :opt="item.id">
			<div class="lf">
				<h1 class="stationName">{{item.name}}</h1>
				<p class="stationAddress">{{item.addr}}</p>
			</div>
			<div class="rt">
				<div class="logoDH"><a class="iconfont icon-daohang" href="#" @click.prevent.stop="gotoGaodeMap(item.name)"></a></div>
				<div class="distance">
					<span>2.2</span><span>km</span>
				</div>
			</div>
			<div class="clear"></div>
			<input type="hidden" class="oilStationId" value="${olpOilStationInfo.oilStationId}"/>
			<input type="hidden" value="${olpOilStationInfo.oilStationIco}" class="oilStationIco">
		</li>
	</ul>
	<div class="alert_location">
		<div>!</div>
		<p>获取当前地理位置失败</p>
	</div>
	<div class="confirmStation" v-if=confirmStation @touchmove.prevent>
		<div>
			<p>{{confirmDetail.name}}</p>
			<div><img src="../assets/img/pay_yzzy.jpg" alt=""></div>
			<ul>
				<li>{{confirmDetail.addr}}</li>
				<li>
                    壳牌高品质燃油，祝您畅行无忧
				</li>
				<li>
					<a href="#" class="lf btnNo" @click.prevent="hideConfirmStation">不是</a>
					<a href="#" class="rt btnYes" @click.prevent.stop="gotoGaodeMap(confirmDetail.name)">我确认在该油站</a>
					<div class="clear"></div>
				</li>
			</ul>
		</div>
	</div>
  </div>
</template>
<script>
import Stations from './stations.json'
export default {
    data () {
        return {
            confirmStation:false,
            msg: "我是msg",
            stations: Stations,
            confirmDetail:[]
        }
    },
    methods:{
        showConfirmStation (index) {
            this.confirmStation=true;
            this.confirmDetail = this.stations[index];
            // this.modalOpen=true;//滚动穿透可用@touchmove.prevent解决
        },
        hideConfirmStation () {
            this.confirmStation=false;
        },
        gotoGaodeMap (name) {
            console.log(name)
        }
    },
    created:function(){
        // 发送ajax,data=当前坐标,返回信息如果定位失败则:to失败页面,
        // 如果定位距离较远,则显示定位
    }
}
</script>
<style scoped>
.alert_location{
    width:3rem;
    height:1.8rem;
    border-radius:0.12rem;
    background:rgba(0,0,0,0.6);
    box-sizing:border-box;
    padding-top:0.3rem;
    position:fixed;
    top:50%;
    left:50%;
    margin-top:-0.9rem;
    margin-left:-1.5rem;
    display: none;
}
.alert_location>div{
    box-sizing:border-box;
    width:0.72rem;
    height:0.72rem;
    line-height:0.72rem;
    text-align:center;
    border:0.02rem solid #fff;
    border-radius:50%;
    color:#fff;
    font-size:0.36rem;
    margin:0 auto;
}
.alert_location>p{
    margin-top:0.2rem;
    font-size:0.26rem;
    color:#fff;
    text-align:center;
}
.locationProblem{
    height:0.64rem;
    line-height:0.64rem;
    background:#F5BDBD;
    color:#f00;
    font-size:0.26rem;
    padding-left: 0.3rem;
}
.captionNear{
    height:0.8rem;
    line-height:0.8rem;
    color:#888;
    font-size:0.3rem;
    padding-left:0.3rem;
}
.confirmStation{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,0.4);
}
.confirmStation>div{
    width:6rem;
    background:#fff;
    border-radius:0.1rem;
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    text-align:center;
}
.confirmStation>div>p{
    height:0.8rem;
    line-height:0.8rem;
    font-size:0.4rem;
    color:#000;
}
.confirmStation>div>div>img{
    width:6rem;
    height:2.74rem;
}
.confirmStation>div>ul>li{
    padding:0.1rem 0.3rem;
    text-align:left;
    border-bottom:1px solid #ddd;
}
.confirmStation>div>ul>li:last-child{
    border-bottom: 0;
}
.confirmStation>div>ul>li:first-child{
    font-size:0.36rem;
}
.confirmStation>div>ul>li:nth-child(2){
    font-size:0.26rem;
}
.confirmStation>div>ul>li:nth-child(2)>span{
    color:#f00;
}
.confirmStation>div>ul>li:last-child>a{
    height:0.6rem;
    line-height:0.6rem;
    border-radius:0.1rem;
    padding:0 0.2rem;
    margin:0.1rem 0rem;
    font-size:0.3rem;
    box-sizing:border-box;
}
.confirmStation>div>ul>li:last-child>a.lf{
    border:1px solid #000;
    margin-left:0.3rem;
}
.confirmStation>div>ul>li:last-child>a.rt{
    background:#108ee9;
    color:#fff;
    margin-right:0.3rem;
}
</style>
